<template>
		<view class=" ">
			<view class="section">
			
			<view class="flex-col  space-y-24" style="height: 390rpx;">
			 <!-- #ifdef H5 -->
			<view class="header" :class="isFixed ? 'u-navbar-fixed' : ''" >
				<view class="serch-box" :class="isFixed ? 'u-height u-padding-top' : ''" >
					<text class=" name-text">{{$APP_NAME}}</text>
				</view>
			</view>
			 <!-- #endif -->
			 <!-- #ifdef APP-PLUS -->
			<view class="mp-header" :class="isFixed ? 'u-navbar-fixed' : ''"  :style="{'padding-top':(isFixed ? statusBarHeight +'px' : '' )}">
				<view class="serch-box" :class="isFixed ? 'u-height u-padding-top' : ''" >
					<view class="serch-wrapper flex">
						<view class="logo">
							<!-- <image :src="logoUrl" mode=""></image> -->
							<text class="name-text" >{{$APP_NAME}}</text>
						</view>
					</view>
				</view>
			</view>
			 <!-- #endif -->
			<view class="flex-row items-center space-x-14" style="padding-left: 20rpx;" @tap="$Router.push('/pages/user/info')">
			<!--  <image
			    class="image_3"
			    src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/650813f45a7e3f03101b8cba/650bb0abec8866001128c01f/16952649562554286215.png"
			  /> -->
			  	<image class="image_3" :src="userInfo.header || $IMAGE_URL + '/base_avatar.png'"
			  					mode="aspectFill"></image>
			  	<text class="font_3 text_5" >{{ userInfo.uname || '请登录~' }}</text>
			
			
			  
			  <view  class="tag-box u-flex" :style=" {background:userInfo.idCard ? $CHANGED: 'rgba(0, 0, 0, 0.2)'}" @tap="$Router.push('/pages/user/authentication/index')">
			  	<!-- <image v-if="userInfo.group.image" class="tag-img" :src="userInfo.group.image" mode="">
			  	</image> -->
			  	<text class="tag-title" v-if="userInfo.idCard">已认证</text>
			  	<text class="tag-title" v-else>未实名</text>
			  </view>
			</view>
			
			</view>
				
			</view>
			<!-- <sh-today-bill v-if="recentlyBill && isLogin" :recentlyBill="recentlyBill"></sh-today-bill> -->
			<view class="flex-col relative group_4 space-y-32">
			  <view class="flex-col space-y-10">
			    <view class="flex-col justify-start  image-wrapper">
				 	<view class="u-flex">
				 		<view @tap="jump('/pages/order/list', { type: order.status })" v-for="order in orderNav" :key="order.id">
				 			<view class="u-flex-col" style="margin-left: 90rpx;">
				 				<image class="image_4" :src="$IMAGE_URL + order.img" mode=""></image>
				 				<text class="item-title">{{ order.title }}</text>
				 				<view class="badge" v-if="orderNum && orderNum[order.type]">{{ orderNum[order.type] }}</view>
				 			</view>
				 		</view>
				 	</view>
			    </view>
					  
			<view class="flex-row justify-between section_2">
			  <text class="self-start text_6">全部订单</text>
			  <view class="flex-col justify-start items-center self-center text-wrapper">
			    <text class="text_7"  @tap="jump('/pages/order/list', { type: '-2' })">立即查看</text>
			  </view>
			</view>
			
			  </view>
				</view>
		</view>
	
</template>

<script>
/**
 * 自定义之个人信息
 * @property {Object} detail - 个人信息
 */
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
import wechat from '@/shopro/wechat/wechat';
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
export default {
	components: {},
	data() {
		return {
			showModal: false,
			platform: this.$platform.get(), //当前平台。
			isFixed: false,
			statusBarHeight: systemInfo.statusBarHeight,
			navBackground: {
				background: 'none'
			},
			recentlyBill:null,
			orderNav: [
				{
					id: 1,
					title: '待审核',
					img: '/tab11.png',
					type: 'noPayStatusNum',
					status:2
				},
				{
					id: 2,
					title: '待发货',
					img: '/tab22.png',
					type: 'noDeliverStatusNum',
					status:3
				},
				{
					id: 3,
					title: '待收货',
					img: '/tab33.png',
					type: 'noSignStatusNum',
					status:4
				},
				{
					id: 4,
					title: '待归还',
					img: '/tab35.png',
					type: 'toBeReturned',
					status:5
				},
				// {
				// 	id: 4,
				// 	title: '待评价',
				// 	img: '/imgs/user/tab44.png',
				// 	type: 'nocomment'
				// }
				// {
				// 	id: 5,
				// 	title: '退换货',
				// 	img: this.$IMG_URL + '/imgs/user/tab55.png',
				// 	type: 'aftersale'
				// }
			]
		};
	},
	mounted() { },
	props: {
		detail: {},
		scrollTop: {
			type: Number,
			default: 0
		}
	},
	watch: {
		scrollTop(val) {
			let backgroundText = this.$COLOR;
			this.isFixed = val > 50 ? true : false;
			this.navBackground.background = val > 50 ? backgroundText : 'none';
		}
	},
	computed: {
		...mapGetters(['isLogin', 'userInfo', 'userOtherData']),
		showRefresh() {
			if (this.isLogin) {
				if (this.platform === 'wxOfficialAccount') {
					return this.userInfo.verification?.wxOfficialAccount;
				}
				// if (this.platform === 'wxMiniProgram') {
				// 	return this.userInfo.verification.wxMiniProgram;
				// }
				// if (this.platform === 'App') {
				// 	return this.userInfo.verification.wxOpenPlatform;
				// }
			}
			return false;
		},
		orderNum() {
			console.log('123',this.userOtherData)
			return this.userOtherData || 0;
		}
	},
	created() {
		this.tologout()
	},
	methods: {
		...mapActions(['getUserInfo', 'showAuthModal',"logout"]),
		jump(path, query) {
			this.$Router.push({
				path: path,
				query: query
			});
		},
		// 点击分享
		onShare() {
			this.$emit('onShare');
		},
		tologout(){
			if(!this.userInfo){
				this.logout()
			}
		},
		getList(){
		    if(this.isLogin){
		
		    let newDate = new Date();
		    
		    let year = newDate.getFullYear();
		    let month = newDate.getMonth() + 1;
		
		    let thisMonthDay = new Date(year, month, 0).getDate();
		
		    let beforTimer = new Date(year+'/'+month+'/01').getTime();
		    let yearTimer = new Date(year+'/'+month+'/' + thisMonthDay).getTime();
		
		
		    let startTime = Math.floor(beforTimer/1000) + '';
		    let endTime = Math.floor(yearTimer/1000) + '';
		
		    let data = {
		      startPeriodStartDate: startTime,
		      startPeriodEndDate: endTime,
		    }
			console.log('zhangdan参数',data)
			this.$http('order.monthList',data).then(res => {
				if(res.code == 200 && res.data.length>0){
					res.data[0].expiretime = this.upTime("%M月%D日",res.data[0].expiretime);
					this.recentlyBill= res.data[0]
				}else{
				  this.recentlyBill= null
				}
			});
			
		}
		
		},
		// 同步用户信息
		async refreshWechatUser() {
			this.showModal = false;
			let token = await wechat.refresh();
			token && this.getUserInfo(token);
		},
		// 跳转门店
		goStore() {
			if (this.userOtherData.store_id) {
				uni.setStorageSync('storeId', this.userOtherData.store_id);
				this.jump('/pages/app/merchant/index', { storeId: this.userOtherData.store_id });
			} else {
				if (uni.getStorageSync('storeId')) {
					this.jump('/pages/app/merchant/index');
				} else {
					this.jump('/pages/app/merchant/list');
				}
			}
			//  #ifdef MP-WEIXIN
			this.$store.commit('subscribeMessage', 'store');
			//  #endif
		},
		// 绑定手机号
		bindMobile() {
			this.showAuthModal('bindMobile');
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
  background-color: #f5f5f7;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.section {
  margin-top: -8rpx;
  padding: 116rpx 0 12rpx;
  background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/650813f45a7e3f03101b8cba/650bb0abec8866001128c01f/16952649574712864576.png');
  background-size: 100% 100%;
}
.u-navbar-fixed {
	margin-top: -8rpx;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 991;
	background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/650813f45a7e3f03101b8cba/650bb0abec8866001128c01f/16952649574712864576.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.u-height{
	height: 85px;	
}
.u-padding-top {
	padding-top: 50rpx;
}
.space-y-24 > view:not(:first-child),
.space-y-24 > text:not(:first-child),
.space-y-24 > image:not(:first-child) {
  margin-top: 48rpx;
}
.space-y-18 > view:not(:first-child),
.space-y-18 > text:not(:first-child),
.space-y-18 > image:not(:first-child) {
  margin-top: 36rpx;
}
.group {
  padding-left: 20rpx;
  padding-right: 4rpx;
}
.group_3 {
  height: 41rpx;
}
.font_1 {
  font-size: 56rpx;
  font-family: SFProText;
  line-height: 40rpx;
  font-weight: 600;
}
.text {
  word-break: break-all;
}
.text_2 {
  color: #000000;
  line-height: 41rpx;
  letter-spacing: -1.12rpx;
}
.text_3 {
  color: #ffffff;
}
.group_2 {
  margin-bottom: 4rpx;
  width: 133rpx;
}
.image_2 {
  width: 89rpx;
  height: 44rpx;
}
.image {
  width: 68rpx;
  height: 42rpx;
}
.pos {
  position: absolute;
  left: 0;
  bottom: 0;
}
.font_2 {
  font-size: 32rpx;
  font-family: PingFangSC;
  line-height: 30rpx;
  color: #373737;
}
.text_4 {
  color: #000000;
}
.space-x-14 > view:not(:first-child),
.space-x-14 > text:not(:first-child),
.space-x-14 > image:not(:first-child) {
  margin-left: 28rpx;
}
.image_3 {
  width: 115rpx;
  border-radius: 100rpx;
  height: 115rpx;
}
.font_3 {
  font-size: 36rpx;
  font-family: PingFangSC;
}
.text_5 {
  color: #30302f;
  line-height: 36rpx;
}
.group_4 {
  margin-top: -144rpx;
  padding: 0 24rpx 24rpx;
}
.space-y-32 > view:not(:first-child),
.space-y-32 > text:not(:first-child),
.space-y-32 > image:not(:first-child) {
  margin-top: 64rpx;
}
.space-y-10 > view:not(:first-child),
.space-y-10 > text:not(:first-child),
.space-y-10 > image:not(:first-child) {
  margin-top: 20rpx;
}
.image-wrapper {
  padding: 28rpx 0;
  background-color: #ffffff;
  border-radius: 16rpx;
}
.image_4 {
  width: 70rpx;
  height: 70rpx;
}
.section_2 {
  padding: 28rpx;
  background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/650813f45a7e3f03101b8cba/650bb0abec8866001128c01f/16952649562554492028.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.name-text{
	color:#252b38;
	font-weight: bold;
	 font-size: 34rpx;
	  margin-left: 23rpx;
}
.text_6 {
  margin-top: 16rpx;
  color: #333233;
  font-size: 40rpx;
  font-family: AlimamaShuHeiTi;
  font-weight: 700;
  line-height: 35rpx;
}
.text-wrapper {
  padding: 16rpx 0;
  background-color: #333233;
  border-radius: 26rpx;
  width: 130rpx;
  height: 52rpx;
}
.text_7 {
  color: #eedfc0;
  font-size: 24rpx;
  font-family: PingFangSC;
  line-height: 22rpx;
}
.image_5 {
  width: 702rpx;
}
.serch-wrapper {
	align-items: center;
}
.space-y-2 > view:not(:first-child),
.space-y-2 > text:not(:first-child),
.space-y-2 > image:not(:first-child) {
  margin-top: 4rpx;
}
.space-x-8 > view:not(:first-child),
.space-x-8 > text:not(:first-child),
.space-x-8 > image:not(:first-child) {
  margin-left: 16rpx;
}
.text_8 {
  margin-left: 20rpx;
  color: #000000;
  line-height: 33rpx;
}
.image_6 {
  opacity: 0.83;
  width: 52rpx;
  height: 16rpx;
}
.pos_2 {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.grid {
  height: 1366rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 910rpx;
  column-gap: 16rpx;
}
.grid-item {
  padding-bottom: 32rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
}
.space-y-9 > view:not(:first-child),
.space-y-9 > text:not(:first-child),
.space-y-9 > image:not(:first-child) {
  margin-top: 18rpx;
}
.image_7 {
  width: 336rpx;
  height: 336rpx;
}
.font_4 {
  font-size: 28rpx;
  font-family: PingFangSC;
  line-height: 26rpx;
  color: #d04241;
}
.equal-division {
  position: relative;
}
.section_3 {
  padding: 8rpx 0;
  background-color: #ffffff;
}
.image_8 {
  width: 48rpx;
  height: 48rpx;
}
.font_5 {
  font-size: 20rpx;
  font-family: PingFangSC;
  line-height: 19rpx;
  color: #999999;
}
.group_5 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.text_9 {
  line-height: 18rpx;
}
.group_6 {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.equal-division-item {
  padding: 8rpx 0;
  width: 250rpx;
}
.space-y-8 > view:not(:first-child),
.space-y-8 > text:not(:first-child),
.space-y-8 > image:not(:first-child) {
  margin-top: 16rpx;
}
.text_10 {
  color: #000000;
}
/************************************************************
** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
** 否则页面将无法正常显示                                  **
************************************************************/

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

view,
image,
text {
  box-sizing: border-box;
  flex-shrink: 0;
}

#app {
  width: 100vw;
  height: 100vh;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.relative {
  position: relative;
}
.tag-box {
	border-radius: 22rpx;
	margin-left: 10rpx;

	.tag-img {
		width: 60rpx;
		height: 60rpx;
		display: inline-block;
		border-radius: 50%;
	}

	.tag-title {
		font-size: 20rpx;
		font-weight: 500;
		color: rgba(129, 129, 129, 1.0);
		line-height: 40rpx;
		padding: 0 10rpx;
	}
}
.badge {
	position: absolute;
	/* #ifndef APP-NVUE */
	display: inline-flex;
	/* #endif */
	justify-content: center;
	align-items: center;
	line-height: 24rpx;
	padding: 4rpx 10rpx;
	border-radius: 100rpx;
	color: #fff;
	font-size: 30rpx;
	z-index: 9;
	background-color: $u-type-error;
	transform: scale(0.8);
	transform-origin: center center;
	// left: 20rpx;
	margin-left: 50rpx;
	// top: 20rpx;
	white-space: nowrap;
}
// 订单卡片
.sh-order-box {
	height: 180rpx;
	background: #fff;
	.order-box {
		flex: 4;
	}
	.all-order {
		position: relative;
		.cut-off--line {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: calc(750rpx/5) - 15rpx;
			width: 30rpx;
			height: 136rpx;
		}
	}

	.order-item {
		flex: 1;
		.item-box {
			position: relative;
		}
		.order-img {
			width: 46rpx;
			height: 46rpx;
		}

		
	}
	
}
.item-title {
	font-size: 25rpx;
	font-weight: 500;
	color: rgba(153, 153, 153, 1);
	line-height: 24rpx;
	margin-top: 20rpx;
}
</style>
